import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import ReactEcharts from 'echarts-for-react';
import darkEchartsTheme from '../../config/theme/darkEchartsTheme';
import echarts from 'echarts';

const modalRoot = document.getElementById('dialog-root');

class LivelyhoodPayTopChart extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('technologyCollegeNumChart');
    this.state = {
      chartOption: undefined,
      chartHeight: 280,
    };
  }
  componentDidMount() {
    modalRoot.appendChild(this.el);
    echarts.registerTheme('theme_name', darkEchartsTheme);
    this.setChartData();
  }
  setChartData() {
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        top:'3%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'value',
          min: -180,
          max: 60,
          interval: 60,
          splitLine:{show:false},
        },
      ],
      yAxis: [
        {
          type: 'category',
          axisLabel: {
            color: '#fff',
            fontSize: 12,
        },
          axisTick: { show: false }, axisLine: { show: true,color:'#515151' },splitLine:{show:false},
          data: ['杭州', '宁波', '合肥', '苏州', '台州', '绍兴',  '无锡', '泰州', '南京', '上海']
        }
      ],
      series: [
        {
          name: '收入消费差额',
          type: 'bar',
          barMaxWidth: 10,
          barGap: '10%',
          barCategoryGap: '10%',
          itemStyle: {
            normal: {
              barBorderRadius: 18,
              color: new echarts.graphic.LinearGradient(
                0, 0, 1, 0,
                [
                    {offset: 0, color: '#14c8d4'},
                    {offset: 1, color: '#43eec6'}
                ]
            )
            },
          },
          label: {
            normal: {
              show: false,
              position: 'right',
              textStyle: {
                color: '#fff',
                fontSize: 12,
              },
            },
          },
          data: [62.08, 60.68, 49.47, 35.11, 28.33, 27.63, -12.11, -16.47, -32.04, -169.17]
        }
      ]
    };
    this.setState({ chartOption: option });
  }

  render() {
    const { style, width, height } = this.props;
    const dtTitle = `异地收入消费差额`;
    const { chartOption } = this.state;
    return createPortal(
      <div
        style={{
          ...style,
          display: 'flex',
          flexDirection: 'column',
          width: width,
          height: height,
          color: '#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom: '1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
            fontWeight: 'bold'
          }}
        >
          <div style={{ float: 'left', marginLeft: 6, fontSize: 15 }}><div style={{ float: 'left', width: 5, height: 35, marginRight: 10, backgroundColor: 'rgba(63,177,277,1)', }} />{dtTitle}</div>
          <div style={{ float: 'right', marginRight: 8 }}>
          </div>
        </div>
        <div style={{ margin: '3px 8px 3px 8px' }}>
          <div>
            {chartOption !== undefined && (
              <ReactEcharts
                option={chartOption}
                notMerge={true}
                lazyUpdate={true}
                theme={'theme_name'}
                style={{ height: this.state.chartHeight }}
              />
            )}
          </div>
        </div>
      </div>,
      this.el
    );
  }
}

export default LivelyhoodPayTopChart;
